<!-- 手绘地图量角器 -->

<template>
  <div v-show="showProtractor">
    <img :src="imgSrc" class="protractor" />
    <div class="protractor-info">当前旋转角度：{{ angle }}</div>
    <div class="protractor-close" title="关闭" @click="closeProtractor()">
      &times;
    </div>

    <CoordPicker :show.sync="showProtractor" class="hpmp-coordpicker" @load="moveableInit" />
  </div>
</template>

<script>
import Moveable from 'moveable'

export default {
  data () {
    return {
      angle: '0°',
      moveable: null,
      showProtractor: false,
      imgSrc: ''
    }
  },
  methods: {
    show (imgSrc) {
      if (imgSrc) {
        this.showProtractor = true
        this.imgSrc = imgSrc
      }
    },
    closeProtractor () {
      if (this.moveable) {
        this.moveable.target.style.top = ''
        this.moveable.target.style.left = ''
        this.moveable.target.style.width = ''
        this.moveable.target.style.height = ''
        this.moveable.target.style.transform = ''
        this.moveable.destroy()
        this.angle = '0°'
      }
      this.showProtractor = false
    },
    moveableInit () {
      this.moveable = new Moveable(document.body, {
        target: document.querySelector('.protractor'),
        // If the container is null, the position is fixed. (default: parentElement(document.body))
        container: document.body,
        draggable: true,
        resizable: true,
        scalable: true,
        rotatable: true,
        warpable: true,
        // Enabling pinchable lets you use events that
        // can be used in draggable, resizable, scalable, and rotateable.
        pinchable: true, // ["resizable", "scalable", "rotatable"]
        origin: true,
        keepRatio: true,
        // Resize, Scale Events at edges.
        edge: false,
        throttleDrag: 0,
        throttleResize: 0,
        throttleScale: 0,
        throttleRotate: 0
      })

      this.moveable.on(
        'drag',
        ({
          target,
          transform,
          left,
          top,
          right,
          bottom,
          beforeDelta,
          beforeDist,
          delta,
          dist,
          clientX,
          clientY
        }) => {
          target.style.left = `${left}px`
          target.style.top = `${top}px`
        }
      )

      this.moveable.on(
        'resize',
        ({ target, width, height, dist, delta, clientX, clientY }) => {
          delta[0] && (target.style.width = `${width}px`)
          delta[1] && (target.style.height = `${height}px`)
        }
      )

      this.moveable
        .on('rotate', e => {
          e.target.style.transform = e.transform
        })
        .on('rotateEnd', e => {
          let deg = e.lastEvent.absoluteRotate % 360
          if (deg > 180) {
            deg = deg - 360
          } else if (deg < -180) {
            deg = deg + 360
          } else {
            deg = deg
          }
          this.angle = deg.toFixed(2) + '°'
        })
    }
  }
}
</script>

<style scoped lang="scss">
.protractor {
  z-index: 5000;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 50vh;
  cursor: move;
}

.protractor-info {
  z-index: 5001;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: fit-content;
  padding: 20px;
  font-size: 2rem;
  color: rgb(50, 151, 253);
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 0 0 4px 4px;
}
.protractor-close {
  z-index: 5001;
  position: fixed;
  top: 15px;
  right: 15px;
  left: auto;
  width: 48px;
  height: 48px;
  text-align: center;
  line-height: 48px;
  border-radius: 50px;
  cursor: pointer;
  user-select: none;
  font-weight: 300;
  font-size: 2rem;
  color: #666;
  background-color: #fff;
  border: 1px solid rgba(0, 51, 113, 0.1);
  &:active {
    color: #000;
  }
}

// 屏蔽点位选择器按钮
.hpmp-coordpicker {
  :deep(.toolbar) {
    display: none;
  }
}
</style>
